<template>
  <!-- 骨架屏 -->
  <SkeletonLoading v-if="initLoading" />
  <div class="expend-module" v-else>
    <div class="expend-wrapper flex-row">
      <div class="expend flex-row">
        <div class="name flex-row">
          <span style="margin-right: 10px">总支出</span>
          <div class="money-wrapper flex-row">
            <text class="count">{{ formatNumber(summaryData.totalAmount, true) }}</text>
            <text class="count" style="margin: 0 8px">元</text>
          </div>
          <a-tooltip :placement="'bottom-right'">
            <template #content>
              <div>
                1、总支出：为车辆购置费、购车其他费（购置税/过户费/运输费/保证金/手续费）、运维费用（维修/保养/年检/违章的代办真实成本）、运营成本、车辆借入之和
              </div>
              <div> 2、车辆购置费及购车其他费属于公司整体支出，不属于某个门店，只有角色为管理员的用户登录时，选择全部门店时才可查看 </div>
            </template>
            <icon-question-circle class="svgtooltip fff" size="16" />
          </a-tooltip>
        </div>
        <div class="bottom flex-row">
          <div class="flex-row">
            <CardRate :rate="{ tb: summaryData.lastYearRate, hb: summaryData.lastCycleRate }" />
          </div>
        </div>
      </div>
    </div>
    <CardDivider style="margin-top: 30px; margin-bottom: 30px" />
    <a-alert style="margin-bottom: 20px">通过时间筛选统计数据时，运营成本取【费用发生日期】，其他费用取【应结日期】 </a-alert>
    <div class="order-wrapper">
      <div class="order-wrapper-card flex-row">
        <card
          v-for="(list, index) in summaryData.expensesList"
          :key="index"
          :hover="list.totalAmount && Number(list.totalAmount) != 0 && list.type != 6"
          class="order-card"
          :class="{ active: list.type == 7 }"
          :title="list.name"
          :icon="getTagItem(list.type).icon"
          :tooltip="getTagItem(list.type).tooltip"
          :rate="{ tb: list.lastYearRate, hb: list.lastCycleRate }"
          :hideRate="[4, 5].includes(list.type)"
          @click="onCardClick(list)"
        >
          <div class="total-num">
            <CardTotal :value="list.totalAmount" unit="元" />
          </div>
          <div class="bottom" v-if="list.childrenList && list.childrenList.length">
            <div class="bottom-item" v-for="(item, i) in list.childrenList" :key="i">
              <!-- 1 车辆借入(list.type == 6) 不支持点击 -->
              <!-- 2 运维-保险费(item.type = 8) 不支持点击 -->
              <CardCell
                stopPropagation
                :linkValue="list.type != 6 && item.type != 8"
                :class="{ 'insure-item': item.type == 8 }"
                :label="item.name"
                :value="item.totalAmount"
                unit="元"
                style="margin-top: 12px"
                primary
                @valueClick="onPageJumpClick({ data: list, childData: item })"
              />
              <CardCell
                v-if="item.type != 8"
                :linkValue="list.type != 6"
                blackValue
                :label="list.type == 1 ? '已付款' : '已结算'"
                :value="item.totalSettlementAmount"
                unit="元"
                style="margin-top: 4px"
                @valueClick="onPageJumpClick({ data: list, childData: item, isPaid: true })"
              />
              <CardCell
                v-if="item.type != 8"
                :linkValue="list.type != 6"
                blackValue
                :label="list.type == 1 ? '未付款' : '待结算'"
                :value="item.totalWaitSettlementAmount"
                unit="元"
                style="margin-top: 4px"
                @valueClick="onPageJumpClick({ data: list, childData: item, isWaitPaid: true })"
              />
            </div>
          </div>
          <div class="bottom flex-row" v-else>
            <div class="bottom-item">
              <CardCell
                :linkValue="list.type != 6"
                label="已结算"
                blackValue
                :value="list.totalSettlementAmount"
                unit="元"
                style="margin-top: 12px"
                @valueClick="onPageJumpClick({ data: list, isPaid: true })"
              />
            </div>
            <div class="bottom-item">
              <CardCell
                :linkValue="list.type != 6"
                label="待结算"
                blackValue
                :value="list.totalWaitSettlementAmount"
                unit="元"
                style="margin-top: 12px"
                @valueClick="onPageJumpClick({ data: list, isWaitPaid: true })"
              />
            </div>
          </div>
          <div v-if="list.name == '车辆购置费'" class="extra-tip">
            注：展示商户所有车辆的购置费总额及购置其他费，跳转后如数据缺失原因为您的机构权限不完整，请前往组织机构添加即可。
          </div>
          <div v-if="list.type == 5" class="extra-line"></div>
          <div v-if="list.type == 6" class="extra-line"></div>
        </card>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { expensesStatistics } from '@/api/dashboard/revenueSummary'
  import { ref } from 'vue'
  import { formatNumber } from '@/utils'
  import card from '../components/card/index.vue'
  import SkeletonLoading from '../components/skeleton-loading.vue'
  import CardTotal from '../components/card/card-total.vue'
  import CardCell from '../components/card/card-cell.vue'
  import CardRate from '../components/card/card-rate.vue'
  import CardDivider from '../components/card/card-divider.vue'
  const emits = defineEmits(['loadDataComplete'])
  // props
  const props = defineProps({
    // 跳转函数
    nav2WithCode: Function,
    // 更新数据更新时间
    refreshUpdateTime: {
      type: Function,
      required: true,
    },
  })
  const summaryData = ref([])
  // 获取筛选数据
  const basicQueryParam = ref({})

  // type:
  // 1-运营成本
  // 2-报销单费用
  // 3-付款单费用
  // 4-车辆购置费
  // 5-购车其他费
  // 6-车辆借入
  // 7-运维费
  // 8-保险费
  // 9-保养费
  // 10-维修费
  // 11-年检费
  // 根据type返回不同的值
  const getTagItem = (type) => {
    const tagItem = {
      1: { tooltip: ['1、运营成本=报销单+付款单', '2、付款状态取：未付款、已付款'], icon: 'expend-operation' },
      7: { tooltip: ['1、运维费总额=保险+保养+维修+年检的总额', '2、已付款、未付款的费项都计算在内'], icon: 'expend-purchase' },
      4: {
        tooltip: [
          '1、车辆状态为空闲可租、租赁中、运维中、已借出车辆的购置费、购置补充费之和',
          '2、不受门店限制，展示商户下所有车辆在筛选时间段内购置费总额，以及结算情况',
        ],
        icon: 'expend-purchase',
      },
      5: {
        tooltip: [
          '1、购车其他费包含：购置税、过户费、运输费、保证金、手续费',
          '2、不受门店限制，展示商户下所有车辆在筛选时间段内购车其他费总额，以及结算情况',
          '3、登录管理员且选择全部门店时，展示车辆购置费及购车其他费用',
        ],
        icon: 'expend-purchase',
      },
      6: {
        tooltip: ['1、统计借调-借入单下借调费(借入)、借调附加费（收付款）的总额', '2、已付款、未付款的费项都计算在内'],
        icon: 'expend-car',
      },
    }
    return tagItem[type] || { tooltip: '', icon: '' }
  }
  // 骨架屏占位，第一次加载后关闭
  const initLoading = ref(true)

  const loadData = (params = {}) => {
    basicQueryParam.value = params
    const queryParam = {
      orgIdList: params.orgIdList,
      orderTimeQueryType: params.orderTimeQueryType,
      startTime: params.startTime,
      endTime: params.endTime,
      selectDateType: params.selectDateType,
    }
    expensesStatistics(queryParam).then((res) => {
      const result = res.result || {}
      summaryData.value = result
      initLoading.value = false
      // 更新数据更新时间
      props.refreshUpdateTime(result.lastUpdateTime)

      emits('loadDataComplete')
    })
  }

  // 卡片点击
  const onCardClick = (data) => {
    if (data.totalAmount && Number(data.totalAmount) != 0 && data.type != 6) {
      onPageJumpClick({ data: data })
    }
  }
  /**
   * 跳转页面
   * @param mode 跳转模式
   * @param extraData 额外参数
   */
  const onPageJumpClick = (extraData) => {
    const { data, childData, isPaid, isWaitPaid } = extraData
    props.nav2WithCode('totalCost', {
      data,
      childData,
      isPaid,
      isWaitPaid,
    })
  }

  defineExpose({
    loadData,
  })
</script>
<style lang="less" scoped>
  .expend-module {
    padding-bottom: 32px;
    padding-top: 20px;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .expend-wrapper {
    position: relative;
    padding: 16px 20px 16px 0;
    width: 100%;
    height: 96px;
    background: linear-gradient(270deg, #eba27a 0%, #fd8e78 100%);
    box-shadow: 0px 16px 24px -15px rgba(237, 106, 111, 0.65);
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 20px;
    .expend {
      height: 100%;
      padding-left: 20px;
      .name,
      .count {
        font-weight: 600;
        font-size: 28px;
        color: #ffffff;
        line-height: 39px;
      }

      .bottom {
        display: flex;
        font-weight: 600;
        font-size: 18px;
        color: #ffffff;
        line-height: 25px;
        margin-left: 48px;
      }
    }
  }
  .order-wrapper {
    .order-wrapper-card {
      align-items: stretch;
      flex-wrap: wrap;
      gap: 20px;
      .order-card {
        position: relative;
        width: 385px;
        padding-bottom: 0;
        .total-num {
          margin-top: 14px;
          align-items: baseline;
          padding-bottom: 12px;
          border-bottom: 1px solid #e7e7e7;
        }
        .bottom {
          display: flex;
          width: 100%;
          .bottom-item {
            box-sizing: border-box;
            width: 50%;
            align-items: flex-start;
            border-right: 1px solid #e7e7e7;
            padding-left: 20px;
            padding-bottom: 12px;
            &:nth-child(1) {
              padding-left: 0;
            }
            &:nth-child(2) {
              border-right: none;
            }
          }
        }
        &.active {
          width: 790px;
          .bottom {
            .bottom-item {
              &:nth-child(2) {
                border-right: 1px solid #e7e7e7;
              }
              &:nth-child(4) {
                border-right: none;
              }
            }
          }
        }
      }
    }
  }

  .extra-tip {
    border-top: 1px solid #e7e7e7;
    font-weight: 400;
    font-size: 12px;
    color: #1890ff;
    line-height: 17px;
    padding: 8px 0;
  }
  .extra-line {
    position: absolute;
    height: calc(100% - 155px);
    width: 176px;
    border-right: 1px solid #e7e7e7;
  }
  .insure-item {
    /deep/ .cell-value {
      cursor: auto;
    }
  }
</style>
